<template>
    <d2-container>
        <template slot="header" v-if="buttonItems.length > 0 || apis.add || searchItems.length>0">
            <!--搜索-->
            <searchBase
                v-if="searchItems.length>0"
                :searchItems.sync="searchItems"
                @searchEvent="searchEvent"
                :searchLoading="listLoading"
            ></searchBase>

            <!-- 按钮 -->
            <buttonbasic
                ref="buttonbasic"
                v-if="buttonItems.length > 0 || apis.add || apis.export  || apis.orderExport  || (apis.delete&&!apis.noAllDelete)"
                :apis="apis"
                :buttonItems.sync="buttonItems"
                @buttonEvent="actButEvent"
            ></buttonbasic>
        </template>


        <!--数据列表-->
        <tableBase
            :apis="apis"
            v-loading="tableLoading"
            :headItems.sync="headItems"
            :dataItems.sync="dataItems"
            :actItems.sync="actItems"
            @actEvent="actButEvent"
        ></tableBase>

        <template slot="footer" v-if="total>0">
            <!--分页-->
            <pagination
                :total="total"
                :page.sync="page"
                :limit.sync="limit"
                @pagination="pagination"
                @pageChange="pageChange"
            ></pagination>
        </template>

        <!-- 添加编辑弹窗 -->
        <el-dialog
            top="10vh"
            :width="formWidth + 'px'"
            :visible.sync="dialogFormVisible"
            v-if="dialogFormVisible"
            :destroy-on-close="true"
            :title="formTitle"
            :close-on-click-modal="false"
            :append-to-body="true"
        >
            <dialogform
                :apis="apis"
                v-loading="formLoading"
                :formItems="formItems"
                :formData="formData"
                @radioChange="radioChange"
                @cancelEvent="dialogFormVisible = false"
                @submitEvent="submitEvent"
            ></dialogform>
        </el-dialog>
    </d2-container>
</template>

<script>
    export default {
        name: "tableList",
        components: {
            searchBase: () => import('./search/index'),
            buttonbasic: () => import('./button/index'),
            tableBase: () => import('./table/index'),
            pagination: () => import('./pagination/index'),
            dialogform: () => import('@/components/plugins/form'),
        },
        props: {
            apis: {
                type: Object,
                default() {
                    return {};
                }
            },
            searchItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            buttonItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            // table表头
            headItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            // 操作按钮
            actItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            formItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            detailItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            formTitle: {
                type: String,
                default() {
                    return this.$route.meta.title;
                }
            },
            formWidth: {
                type: String,
                default() {
                    return this.formItems.length > 10 || this.detailItems.length > 10
                        ? "1100"
                        : "400";
                }
            },
        },
        data() {
            return {
                tableLoading: false,
                searchDate: {}, // 搜索数据
                dataItems: [], // 列表数据
                // 分页
                page: 1, //当前页
                limit: 15, //条数
                total: 0, //总数

                formData: {},
                dialogFormVisible: false, // 编辑弹窗
                formLoading: false, //弹窗加载状态
                dialogDetailVisible: false, //详情弹窗
                listLoading: false,
            }
        },
        mounted() {
            this.getListData();
        },
        methods: {
            // 获取列表数据
            getListData() {
                this.tableLoading = true;
                let param = {};
                param = {
                    page: this.page,
                    limit: this.limit,
                }
                Object.assign(param, this.searchDate);
                let apis = this.apis.list.url || this.apis.list;
                if (this.apis.list.params) {
                    Object.assign(param, this.apis.list.params);
                }
                // console.log('param',param)
                apis(param).then(res => {
                    setTimeout(() => {
                        this.dataItems = res.data;
                        this.total = res.total;
                        this.tableLoading = false
                    },500)

                }).catch(err => {
                    this.tableLoading = false
                })
            },

            // 搜索
            searchEvent(e) {
                // console.log(e)
                this.searchDate = e;
                this.$emit("searchEvent", e);
                this.initPage();
            },

            // 表格 顶部/内部 按钮事件
            actButEvent(e) {
                console.log(e)
                switch (e.eventName) {
                    case "addEdit":
                        this.addEditEvent(e);
                        break;
                    case "detail":
                        this.addEditEvent(e);
                        break;
                    case "delete":
                        this.deleteEvent(e);
                        break;
                    default:
                        this.$emit("actButEvent", e);
                        break;
                }
            },
            // 新增/编辑
            addEditEvent(e) {
                this.formData = {};
                let apis;
                if (e.eventName == "addEdit") {
                    this.dialogFormVisible = true;
                    // apis = this.apis.get;
                } else {
                    this.dialogDetailVisible = true;
                    apis = this.apis.detail;
                }
                if (e.val) {
                    this.formLoading = false;
                    this.formData = _.cloneDeep(e.val);
                    /*apis(e.val["id"] || e.val["userId"] || e.val["channelId"])
                        .then(({ data }) => {
                            setTimeout(() => {
                                this.formData = data.data;
                            }, 200);
                            setTimeout(() => {
                                this.formLoading = false;
                            }, 1000);
                        })
                        .catch(() => {
                            this.formLoading = false;
                        })*/
                        // .done(() => {});
                }
                // this.formData = e || {};
            },
            radioChange(e) {
                this.$emit("radioChange", e);
            },
            // 提交保存
            submitEvent() {
                if (this.apis.add && this.apis.add.params) {
                    Object.assign(this.formData, this.apis.add.params);
                }
                let api = null;
                if (this.formData.id) {
                    api = this.apis.update || this.apis.tableUpdate;
                } else {
                    api = this.apis.add.url || this.apis.add;
                }
                for (let i in this.formData){
                    if (this.formData[i] === undefined || this.formData[i] === '') {
                        delete this.formData[i]
                    }
                }
                if (
                    this.formData.created_at ||
                    this.formData.updated_at
                ) {
                    delete this.formData.created_at;
                    delete this.formData.updated_at;
                }

                this.formLoading = true;
                api(this.formData, this.formData.id)
                    .then(() => {
                        if (this.formData.id) {
                            this.$message({
                                type: "success",
                                message: "修改成功!"
                            });
                        } else {
                            this.$message({
                                type: "success",
                                message: "添加成功!"
                            });
                        }
                        this.getListData();
                        this.dialogFormVisible = false;
                        this.formLoading = false;
                    })
                    .catch(() => {
                        this.getListData();
                        this.formLoading = false;
                    })
            },

            // 单个删除
            deleteEvent(e) {
                e = e.val;
                this.$confirm("是否要删除该记录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "error",
                    roundButton: true
                })
                    .then(() => {
                        let id = e ? e.id : ''
                        this.apis.delete(id).then(res => {
                            setTimeout(() => {
                                this.$message({
                                    type: "success",
                                    message: "删除成功!"
                                });
                                this.getListData();
                            }, 100);
                        })
                    }).catch(() => {
                        /*this.$message({
                            type: "info",
                            message: "已取消删除"
                        });*/
                    });
            },

            // 页数初始化
            initPage() {
                this.page = 1;
                this.size = 10;
                this.getListData();
            },
            // 每页条数改变时
            pagination(val) {
                // console.log(val)
                this.page = val.page;
                this.limit = val.limit;
                this.getListData();
            },
            // 分页改变
            pageChange(page, limit) {
                // console.log(page,limit)
                this.page = page;
                this.size = limit;
                this.getListData();
            },
        }
    }
</script>

<style scoped>

</style>
